<template>
	<view class="big-box">
		<view class="steps">
			<u-steps current="0" activeColor="#0000ff">
				<u-steps-item title="手机号注册"></u-steps-item>
				<navigator url="../step2/step2"></navigator>
				<u-steps-item title="编辑信息"></u-steps-item>

				<u-steps-item title="再次登录"></u-steps-item>
			</u-steps>
		</view>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" class="form">
			<u-form-item label="手机号码" prop="te" borderBottom ref="item1">
				<u--input v-model="model1.te" border="none" placeholder="请输入电话号码"></u--input>
			</u-form-item>
			<u-form-item label="验证码" prop="code" borderBottom ref="item1">
				<u--input v-model="model1.code" border="none" placeholder="请输入验证码"></u--input>
				<view class="get-code" :style="{ color: getCodeBtnColor }" @click.stop="getCode()">{{ getCodeText }}</view>
			</u-form-item>
			<u-form-item label="用户密码" prop="password" borderBottom ref="item1">
				<u--input v-model="model1.password" border="none" placeholder="请输入密码"></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="spassword" borderBottom ref="item1">
				<u--input v-model="model1.spassword" border="none" placeholder="请再次输入密码"></u--input>
			</u-form-item>
		</u--form>
		<u-button @click="submit" class="btn">立即注册</u-button>
	</view>
</template>

<script>
	// import {
	// 	message
	// } from '../../../minixs/message.js';
export default {
	data() {
		return {
			getCodeText: '获取验证码',
			getCodeBtnColor: '#000000',
			getCodeisWaiting: false,
			type: 0,
			model1: {
				userInfo: {
				},
			},
			rules: {
				te:[
					{
					required: true,
					message: '请填写电话号码',
					trigger: ['blur', 'change']
					},
					{
					validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					trigger: ['change','blur'],
					}
				],
				password: {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur']
				},
				spassword: [
					{
						type: 'string',
						required: true,
						message: '请确认您的密码',
						trigger: ['blur']
					},
					{
						validator:(rule, value, callback)=>{
						if(value===''){
						callback(new Error('请再次输入密码'))
						}else if(value !== this.model1.password){
						callback(new Error('两次输入密码不一致'))
						}else{
						callback( )
						}
					},
					trigger:'blur'
					},
				],
				code: [
					{
						type: 'string',
						required: true,
						message: '请填写4位验证码',
						trigger: ['blur']
					},
				],
			},
			radio: '',
			switchVal: false
		};
	},
	onReady() {

			},
	// mixins: [message],
	onLoad() {},
	methods: {
		Timer() {},
		passwordSure() {
			if(model1.userInfo.zcps != model1.userInfo.ps) {
				model1.userInfo.zcps.message = "请输入正确的密码";
			}
		},
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.form1.validateField('userInfo.sex')
		},
		getCode() {

			if (this.getCodeisWaiting) {
				return;
			}
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.model1.te)) {
				uni.showToast({
					title: '请填写正确手机号码',
					icon: 'none'
				});
				return false;
			}
			this.getCodeText = '发送中...';
			this.getCodeisWaiting = true;
			this.getCodeBtnColor = 'rgba(0, 0, 0, 0.5)';
			//示例用定时器模拟请求效果

			this.sendMessage()

			this.setTimer();
			//示例用定时器模拟请求效果

		},
		setTimer() {
			let holdTime = 60;
			this.getCodeText = '重新获取(60)';
			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.getCodeisWaiting = false;
					this.getCodeBtnColor = '#000000';
					this.getCodeText = '获取验证码';
					clearInterval(this.Timer);
					return;
				}
				this.getCodeText = '重新获取(' + holdTime + ')';
				holdTime--;
			}, 1000);
		},
		submit() {
					var UserInfoList = this.model1;
					console.log(UserInfoList.te);
					// uni.$u.http
					// 	.post('/app/register/',{mobile: UserInfoList.te, password: '123456'}  )
					// 	.then(res => {
							
					// 	})
					// 	.catch(err => {});
				}
	},



};
</script>

<style>
.big-box {
	padding: 0 50upx;
	padding-top: 30px;
}
.steps {
	width: 340px;
}
.form {
	margin-top: 40px;
	padding: 10px;
}
.btn {
	margin-top: 10px;
	margin-bottom: 30px;
	background-color: #00aaff;
}
</style>
